<template>
  <view class="payment-results">
    <up-icon name="checkmark-circle-fill" size="128rpx" color="#03A142" class="results-icon"></up-icon>
    <view class="results-title">支付成功</view>
    <view class="results-label">{{payType}}付款 ￥{{price}}</view>
    <view class="results-label">可在个人中心“我的鉴定”中查看</view>
    <view class="results-btn">
      <up-button text="查看订单" shape="circle" color="#A4682F" class="btn-nav" @click="onTaskDetail"></up-button>
      <up-button text="返回首页" plain shape="circle" color="#666666" class="btn-nav" @click="onRetuen"></up-button>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const price = ref('0')
  const payType = ref('')
  const taskId = ref()
  onLoad((e) => {
    price.value = e.price
    payType.value = e.payType
    taskId.value = e.taskId
  })

  function onRetuen() {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
  function onTaskDetail(){
    uni.redirectTo({
      url:`/pages/my/orderPage/orderDetails?id=${taskId.value}`
    })
  }
</script>

<style lang="scss" scoped>
  .payment-results {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    .results-icon {
      margin-top: 120rpx;
    }

    .results-title {
      font-size: 40rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      margin-top: 32rpx;
    }

    .results-label {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 16rpx;
    }

    .results-btn {
      width: 320rpx;
      margin-top: 64rpx;
      display: flex;
      flex-direction: column;

      .btn-nav {
        margin-top: 32rpx;
      }
    }
  }
</style>